<template>
  <view class="content">
	  <u-navbar :is-back="false" title="打卡记录"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
    <view class="x-row u-skeleton">
      <view class="x-col left_text">考勤统计</view>
      <view class="x-col-center" style="padding-right: 20upx;">
        <picker mode="date" :end="endDate" fields="month" @change="dateChange">
          <view class="x-row">
            <u-icon name="arrow-left" class="x-col-center" color="#333" size="28"
              style="opacity: 0.7;"></u-icon>
            <view class="itemna">{{date}}</view>
            <u-icon name="arrow-right" class="x-col-center" color="#333" size="28"
              style="opacity: 0.7;"></u-icon>
          </view>
        </picker>
      </view>
    </view>
    <view style="background: #F5F7F9; height: 16upx;"></view>
    <view class="recordlsit" v-for="(li,index) in clist" :key="li.id"
      @click="showClockThis(li.date_time)">
      <view class=" x-row">
        <view class="x-col">
          <view class="text_1">
            <dateWeek :date="li.date_time"></dateWeek>
          </view>

        </view>
        <view :class="['tdex14',{tdex:li.status.afternoon!=1||li.status.morning!=1}]"><text
            v-if="li.status.afternoon!=1||li.status.morning!=1">异常</text><text v-else>正常</text>
        </view>

      </view>
      <block v-if="li.status.morning!=1">
        <view class="x-row">
          <view class="textgbsie x-col x-col-center">上班卡：{{li.morning.sign_time}}</view>
          <view class="x-col-center action"><text v-if="li.morning.status !=1">
              {{li.morning.status==2?'迟到':(li.morning.status==3?'早退':(li.morning.status==3?'请假':'缺卡'))}}
            </text></view>
        </view>
      </block>
      <block v-if="li.status.afternoon!=1">
        <view class="x-row">
          <view class="textgbsie x-col x-col-center">下班卡：{{li.afternoon.sign_time}}</view>
          <view class="x-col-center action"><text v-if="li.afternoon.status !=1">
              {{li.afternoon.status==2?'迟到':(li.afternoon.status==3?'早退':(li.afternoon.status==3?'请假':'缺卡'))}}
            </text></view>
        </view>
      </block>
    </view>

    <u-empty mode="data" margin-top="100" v-if="isAllList==0&&clist.length==0"></u-empty>
    <u-loadmore margin-bottom="130" marginTop="130" bg-color="#ffffff"
      v-if="clist.length>0&&isAllList==0" :status="status" />
    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
    <u-popup mode="bottom" border-radius="0" height="700" closeable="true"
      safe-area-inset-bottom="true" v-model="showClock">
      <scroll-view scroll-y="true" class="clockBox" style="height: 700rpx;">
        <view class="borderBottom stitle">
          今日打卡{{cinfo.morning.length+cinfo.afternoon.length}}次
        </view>
        <view class="x-row toprow">
          <view class="left">
            <view style="height: 10rpx;"></view>
            <view class="dian">

            </view>
            <view class="line">

            </view>
          </view>
          <view class="time x-col-center">
            上班时间 {{cinfo.morning_time}}
          </view>
        </view>
        <view class="x-row sinfo">
          <!-- <view class="left">
						</view> -->
          <view class="x-col-center x-col right">
            <block v-for="(m,midx) in cinfo.morning">
              <view class="ctime">
                打卡时间 {{m.sign_time}}
              </view>
              <view class="x-row" v-if="m.wifi">
                <view class="wifi x-col-center">
                  wifi
                </view>
                <view class="company">
                  {{m.wifi_name}}
                </view>
              </view>
              <view class="x-row" v-if="m.lat">
                <view class="iconfont icondizhi2  x-col-center">
                </view>
                <view class="x-col x-col-center">
                  <view class="x-row" @click="gotoShowImg(m.img)">
                    <view class="company x-col-center x-col">
                      外勤事由：{{m.content?m.content:''}}
                    </view>
                    <view class="photo x-col-center" v-if="m.img.length>0">
                      查看图片
                    </view>
                    <view class="iconfont iconyou x-col-center" v-if="m.img.length>0">

                    </view>
                  </view>

                  <view class="company">
                    {{m.clock_address}}
                  </view>
                </view>

              </view>
            </block>
          </view>
        </view>
        <view class="x-row">
          <view class="left">
            <view class="line"></view>
            <view class="dian"></view>

          </view>
          <view class="time x-col-center">
            下班时间 {{cinfo.afternoon_time}}
          </view>
        </view>
        <view class="x-row sinfo" style="border-left: none;">
          <!-- <view class="left">
							</view> -->
          <view class="x-col-center x-col right">
            <view class="borderBottom" style="padding-bottom: 20rpx;"
              v-for="(m,midx) in cinfo.afternoon">
              <view class="ctime">
                打卡时间 {{m.sign_time}}
              </view>
              <view class="x-row" v-if="m.wifi">
                <view class="wifi x-col-center">
                  wifi
                </view>
                <view class="company">
                  {{m.wifi_name}}
                </view>
              </view>
              <view class="x-row" v-if="m.lat">
                <view class="iconfont icondizhi2  x-col-center">
                </view>
                <view class="x-col x-col-center">
                  <view class="x-row" @click="gotoShowImg(m.img)">
                    <view class="company x-col-center x-col">
                      外勤事由：{{m.content?m.content:''}}
                    </view>
                    <view class="photo x-col-center" v-if="m.img.length>0">
                      查看图片
                    </view>
                    <view class="iconfont iconyou x-col-center" v-if="m.img.length>0">

                    </view>
                  </view>

                  <view class="company">
                    {{m.clock_address}}
                  </view>
                </view>

              </view>
            </view>
          </view>
        </view>

      </scroll-view>

    </u-popup>

  </view>
</template>

<script>
import dateWeek from '../../components/dateWeek'
export default {
  components: {
    dateWeek
  },
  data() {
    return {
      date: '',
      endDate: '',
      clist: [3],
      isAllList: 1,
      page: 1,
      status: 'loading',
      loading: true,

      showClock: false,
      cinfo: ''
    }
  },
  onLoad(e) {
    var date = new Date(),
      year = date.getFullYear(),
      month = date.getMonth() + 1
    this.date = e.date ? e.date : year + '-' + month
    this.endDate = this.date
    this.getList()
  },
  onReachBottom() {
    if (this.isAllList != 0) {
      this.getList()
    }
  },
  methods: {
    gotoShowImg(ary) {
      this.$api.previewImgs(ary, ary[0])
    },
    showClockThis(e) {
      // clock/clock_info

      let that = this,
        params = {
          date: e
        }
      this.$axios('clock/clock_info', params, 'GET').then(res => {
        that.cinfo = res.result
        that.showClock = true
      })
    },
    dateChange(e) {
      //
      this.date = e.detail.value
      this.defaultData()
      this.getList()
    },
    defaultData() {
      this.isAllList = 1
      this.page = 1
      this.clist = []
      this.status = 'loading'
      this.loading = true
    },
    getList() {
      let that = this,
        params = {
          date: this.date,
          page: this.page,
          limit: getApp().globalData.limit
        }
      if (that.page == 1) {
        that.clist = []
      }
      this.$axios('clock/clock_list', params).then(res => {
        that.loading = false

        if (res.result.length == 0) {
          that.isAllList = 0
          that.status = 'nomore'
        } else {
          var list = that.clist
          res.result.map(e => {
            list.push(e)
          })
          that.clist = list
          that.page = that.page + 1
          if (that.clist.length < 20 && that.page == 2) that.getList()
        }
      })
    }
  }
  //onHide:{},  //监听页面隐藏
  //onUnload:{},	//监听页面卸载
  //onPullDownRefresh:{},  //监听用户下拉动作，一般用于下拉刷新  page.json  "enablePullDownRefresh":true,//开启下拉刷新
  //onReachBottom:{}, //页面滚动到底部
  //onShareAppMessage:{}, 用户点击右上角分享
}
</script>

<style scoped lang="scss">
.clockBox {
  .stitle {
    padding: 30rpx;
    box-sizing: border-box;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }
  .toprow {
    padding: 38rpx 0 0 0;
  }
  .left {
    width: 70rpx;
    // padding-top: 20rpx;
    .dian {
      width: 16rpx;
      height: 16rpx;
      background: #d8d8d8;
      margin: 0 auto;
      border-radius: 50%;
    }
    .line {
      width: 2rpx;
      height: 20rpx;
      background: rgba(0, 0, 0, 0.4);
      margin: 0 auto;
    }
  }
  .photo {
    color: #007aff;
    font-size: 28rpx;
  }
  .time {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
  }
  .ctime {
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    line-height: 42rpx;
    padding: 14rpx 0 4rpx 0;
  }
  .wifi {
    width: 49rpx;
    height: 29rpx;
    background: #4c7699;
    text-align: center;
    line-height: 22rpx;
    border-radius: 10rpx;
    margin-right: 10rpx;
    font-size: 22rpx;
    color: #ffffff;
  }
  .sinfo {
    width: 680rpx;
    margin-left: 35rpx;
    border-left: 2rpx solid rgba(0, 0, 0, 0.4);
  }
  .right {
    padding: 0 0 34rpx 34rpx;
  }
  .icondizhi2 {
    font-size: 40rpx;
    color: #d8d8d8;
    margin-right: 10rpx;
  }
}

.left_text {
  color: #333;
  line-height: 105upx;
  padding-left: 32upx;
  font-size: 30upx;
}

.itemna {
  color: #333;
  font-size: 30upx;
  padding: 0 20upx;
}

.recordlsit {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.text_1 {
  line-height: 92upx;
  padding-left: 30upx;
  font-size: 32upx;
}

.tdex14 {
  line-height: 92upx;
  font-size: 32upx;
  color: #22bfb6;
  padding-right: 32upx;
}

.tdex {
  color: #ff930a;
}

.textgbsie {
  color: #999;
  font-size: 24upx;
  padding: 0 32upx;
  box-sizing: border-box;
}

.action {
  line-height: 92upx;
  font-size: 24upx;
  padding-right: 32upx;
}
</style>
